<template>
  <el-form size="small" label-width="40px" label-position="right">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-form-item label="省：" prop="provinces">
          <el-select
            v-model="provinces"
            placeholder="请输入省"
            style="width: 100%"
            clearable
            @change="val => changeProvinces(val)"
          >
            <el-option
              v-for="item in provincesData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="市：" prop="city">
          <el-select
            v-model="city"
            placeholder="请输入市"
            style="width: 100%"
            clearable
            @change="val => changeCity(val)"
          >
            <el-option
              v-for="item in cityData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="区：" prop="district">
          <el-select
            v-model="district"
            placeholder="请输入区"
            style="width: 100%"
            clearable
            @change="val => changeDistrict(val)"
          >
            <el-option
              v-for="item in districtData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import $http from '@/api/server/http'

export default {
  name: 'ZlstAddressInput',
  data() {
    return {
      provinces: '',
      city: '',
      district: '',
      provincesData: [],
      cityData: [],
      districtData: []
    }
  },
  created() {
    this.getProvincesData()
  },
  methods: {
    // 获取省份信息
    getProvincesData() {
      $http.get('provinces')
        .then(res => {
          if (res.data.resultCode !== 0) {
            return false
          }
          const data = res.data.data
          this.provincesData = data.map(item => {
            return {
              label: item.provinceName,
              value: item.provinceId
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取市的信息
    getCityData(parentId) {
      $http.get('addressUrl', {}, 'provinces', parentId, 'cities')
        .then(res => {
          if (res.data.resultCode !== 0) {
            return false
          }
          this.addressInputData = []
          const data = res.data.data
          this.cityData = data.map(item => {
            return {
              label: item.cityName,
              value: item.cityId
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取区的信息
    getDistrictData(parentId) {
      $http.get('addressUrl', {}, 'cities', parentId, 'districts')
        .then(res => {
          if (res.data.resultCode !== 0) {
            return false
          }
          this.districtData = []
          const data = res.data.data
          this.districtData = data.map(item => {
            return {
              label: item.districtName,
              value: item.districtId
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    changeProvinces(val) {
      this.city = ''
      this.cityData = []
      this.district = ''
      this.districtData = []
      this.getCityData(val)
    },
    changeCity(val) {
      this.district = ''
      this.districtData = []
      this.getDistrictData(val)
    },
    changeDistrict() {

    }
  }
}
</script>
